为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery DOM操作简单总结-改

标签:
JQuery
jQuery DOM操作可像SQL操作那样简单分为增、删、改、查。可能这有些牵强,但是能帮助我们理解和记忆。
jQuery DOM操作——改:
一、DOM拷贝

clone(),克隆,深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。

$("div").clone()     //只克隆了结构,事件丢失
$("div").clone(true)   //结构、事件与数据都克隆
二、DOM替换
  1. .replaceWith():用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
    $("div:eq(1)").replaceWith("<div class='replaceWith'>replaceWith替换第二个div的内容</div>")

    2 . .replaceAll()和.replaceWith()功能类似,但是目标和源相反

    $("<div class='replaceAll'>replaceAll替换第二个div的内容</div>").replaceAll($("div:eq(1)"))
    三、DOM包裹
  2. .wrap(),在集合中匹配的每个元素周围包裹一个HTML结构
    $("p").wrap("<div></div>")
    $("p").wrap(function() {
    return "<div><div/>";   //与第一种类似,只是写法不一样
    })

    2 . .unwrap(),作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟、子孙节点,如果存在)在原来的位置。

    $("p").unwarp()
    $("p").unwrap(function() {
     return "<div></div>";    //与第一种类似,只是写法不一样
    })

    3 . .wrapAll():给集合中匹配的元素增加一个外面包裹HTML结构

    $("p").wrapAll("<div></div>")
    $("p").wrapAll(function() {
     return "<div></div>";    //与第一种类似,只是写法不一样
    })

    4 . .wrapInner():给集合中匹配的元素的内部,增加包裹的HTML结构

    $("div").wrapInner("<div></div>")
    $("div").wrapInner(function() {
     return "<div></div>";      //与第一种类似,只是写法不一样
    })
点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
271

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消